<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>

<!DOCTYPE html>

<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>여기에 제목을 입력하세요.</title>
<!--모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!--나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<!-- jquery plugin -->
<link rel="stylesheet" type="text/css" href="assets/css/lightbox.css" />


<!--반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/nonresponsive.css" /> -->
<!--IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->
<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->
</head>
<style type="text/css">
.main-menu {
	margin-top: 50px;
}

#menu1 {
	padding-top: 50px;
}

#menu2 {
	padding-top: 50px;
}

#menu3 {
	padding-top: 50px;
}

#menu4 {
	padding-top: 50px;
}

#menu5 {
	padding-top: 50px;
}

ol,ul {
	list-style: none;
}

.gallery li {
	display: inline-block;
	width: 200px;
	height: 120px;
	padding: 10px;
}

.gallery li img {
	width: 100%;
	height: 100%;
	border: 0;
}

#sub-menu {
	width: 90%;
	margin: auto;
	border: 5px solid #FFFF36;
}

#address1{
display: inline-block;
position: absolute;
margin-left: 12%;
margin-top: 30px;
}

#address2{
display: inline-block;
position: absolute;
margin-left: 40%;
margin-top: 30px;
}
#address3{
display: inline-block;
position: absolute;
margin-left: 70%;
margin-top: 30px;
}
#address4{
display: inline-block;
position: absolute;
margin-left: 12%;
margin-top: 150px;
}
#address5{
display: inline-block;
position: absolute;
margin-left: 40%;
margin-top: 150px;
}
#address6{
display: inline-block;
position: absolute;
margin-left: 70%;
margin-top: 150px;
}

h1{
margin: 10px;
}
	
		
			
	legend{
	text-indent:30px;
	font-style:italic;
	font-family: "Helvetica";
	}	
		

#menu1-img {
margin-left: 13%;
margin-top: 20px;
margin-bottom: 30px;
}

#menu1-text{
 	position: absolute;
 	left: 50%;
 	top: 230px;
 	
 	
}
</style>


<body>

	<!-- 메뉴바 -->
	<nav class="navbar  navbar-fixed-top" role="navigation">
		<div class="container">
			<!-- 로고 -->
			<div class="navbar-header">
				<a class="navbar-brand" href="#"><h1><strong>Arrayazum</strong></h1></a>
				<!-- 반응형 메뉴 구현 기능 추가 -->
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target=".navbar-collapse">
					<span class="sr-only">메뉴열기</span><span class="icon-bar"></span><span
						class="icon-bar"></span><span class="icon-bar"></span>
				</button>
				<!--반응형 메뉴 구현 기능 추가 끝 -->
			</div>
			<!-- 메뉴 항목 -->
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<!-- 여기가 드롭다운 입니다. 앞에서 이미 소개를 많이 한 내용입니다. -->
					<li class="menu1"><a href="#menu1" class="menu"><h3>introduction </h3></a></li>
					<li class="menu2"><a href="#menu2" class="menu"><h3>summary</h3></a></li>
					<li class="menu3"><a href="#menu3" class="menu"><h3> technology </h3></a></li>
					<li class="menu4"><a href="#menu4" class="menu"><h3>screen shot</h3> </a></li>
					<li class="menu5"><a href="#menu5" class="menu"><h3>profile</h3> </a></li>

				</ul>

			</div>

		</div>
	</nav>

	<div class="main-menu">
		<div id="menu1">
			<div id="sub-menu">
				<legend>  introduction</legend>
				<img  id="menu1-img" src="assets/img/aaa.jpg" />
				<div id="menu1-text">
				<text style="font: 30px Helvetica;" ><strong>Arryazum 은 무엇???</strong></text><br/><br/> 
				<text style="font: 20px Helvetica;">어디를 가든 쉽고 빠르게 갈 수 있는 방법을 알려줌</text><br/><br/>
				<text style="font: 30px Helvetica;"><strong>Arryazum 만의 특징???</strong></text><br/><br/>
				<text style="font: 20px Helvetica;">버스 & 지하철 과 연동 그리고 시간과 거리에 따라 알람을 알려줌</text><br/><br/>
				<text style="font: 35px Helvetica;"><strong>Arryazum</strong></text>
				</div>
				
			
			</div>
		</div>
		<div id="menu2">
				
			<div id="sub-menu">
				<legend>  summary</legend>

			<div class="example">
				<a href="assets/img/modal1.jpg" data-lightbox="imgae-1" title="모형도">
					<img src="assets/img/modal_th.jpg"/>
				</a>
			</div>

			</div>
		</div>

			<div id="menu3">
				<div id="sub-menu">
					<legend>  technology</legend>
				<table class="table table-striped table-bordered">
					<tbody>
						<tr>
						<td class="col-lg-2">1열</td>
						<td>2열</td>
						</tr>
						
						<tr>
						<td class="col-lg-2">1열</td>
						<td>2열</td>
						</tr>
						
						<tr>
						<td class="col-lg-2">1열</td>
						<td>2열</td>
						</tr>
						
						<tr>
						<td class="col-lg-2">1열</td>
						<td>2열</td>
						</tr>
					</tbody>
					
				</table>
				
				</div>

				</div>
				<div id="menu4">
					<div id="sub-menu">
						<legend>  screen shot</legend>
						<ul class="gallery">
							<li><a href="assets/img/main.jpg" data-lightbox="roadtrip"title="메인페이지"> <img src="assets/img/main_th.jpg" /></a></li>
							<li><a href="assets/img/search_result.jpg"data-lightbox="roadtrip" title="경로검색"> <img src="assets/img/search_result_th.jpg" /></a></li>
							<li><a href="assets/img/alarm1.jpg" data-lightbox="roadtrip" title="알람"> <img src="assets/img/alarm1_th.jpg" /></a></li>
							<li><a href="assets/img/rout.jpg" data-lightbox="roadtrip" title="경로이동"> <img src="assets/img/rout_th.jpg" /></a></li>
							<li><a href="assets/img/map.jpg" data-lightbox="roadtrip" title="지도"> <img src="assets/img/map_th.jpg" /></a></li>
							<li><a href="assets/img/bookmark.jpg" data-lightbox="roadtrip" title="북마크"> <img src="assets/img/bookmark_th.jpg" /></a></li>
						</ul>
					</div>
				</div>
				
				<div id="menu5">
					<div id="sub-menu">
					
					<legend>  profile</legend>
					
						<address id="address1">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>
						
						<address id="address2">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>
						
						<address id="address3">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>
						
						<address id="address4">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>
						
						<address id="address5">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>
						
						<address id="address6">
							<strong>Full Name</strong></br>
							 <abbr title="Phone">P:</abbr> (123) 456-7890</br>
							 <a href="mailto:#">first.last@example.com</a>
						</address>

							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
							<br/>
						
														
					</div>
				</div>

			</div>

			<!--Javascript -->
			<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
			<script src="assets/js/bootstrap.min.js"></script>
			<script type="text/javascript" src="assets/js/lightbox-2.6.min.js"></script>
			
		
			
</body>
</html>
